同心圆矩形（ConcentricRectangle）
ConcentricRectangle 是 iOS 26+ 引入的一种同心矩形（Concentric Rectangle）形状视图，用于创建具有“向内递进圆角”特性的矩形结构。
该形状特别适合用于：
- 现代玻璃风格按钮
- 卡片容器背景
- 交互裁剪区域（命中测试形状）
- 玻璃过渡动画遮罩
- 动态层级 UI 结构
在 Scripting 中，ConcentricRectangle 既可以作为一个独立 Shape 视图渲染，也可以作为：
clipShapebackgroundcontentShape
中的专用形状类型使用。
一、ConcentricRectangle 基本定义
1type ConcentricRectangleProps = ShapeProps & ConcentricRectangleShape
2
3/**
4 * A concentric rectangle aligned inside the frame of the view containing it.
5 * @available iOS 26+.
6 */
7declare const ConcentricRectangle: FunctionComponent<ConcentricRectangleProps>
说明
二、角样式系统：EdgeCornerStyle
ConcentricRectangle 的核心能力来自其角样式系统 EdgeCornerStyle，用于描述单个角的行为方式。
1type EdgeCornerStyle =
2 | {
3 style: "fixed"
4 radius: number
5 }
6 | {
7 style: "concentric"
8 minimum: number
9 }
10 | "concentric"
1. 固定圆角模式（fixed）
1{
2 style: "fixed"
3 radius: number
4}
用于创建传统固定半径圆角矩形。
参数说明：
| 参数 |
说明 |
radius |
固定圆角半径，单位为 pt |
该模式适合传统静态卡片、按钮等场景。
2. 同心递进圆角模式（concentric）
1{
2 style: "concentric"
3 minimum: number
4}
用于创建随尺寸递进变化的“同心圆角效果”。
参数说明：
| 参数 |
说明 |
minimum |
最小内层圆角半径，系统会根据实际尺寸自动向外递进 |
该模式适用于：
- 玻璃按钮
- 动态尺寸卡片
- 层级叠加组件
- 动态动画遮罩
3. 简写模式
等价于：
1{
2 style: "concentric"
3 minimum: 系统默认最小值
4}
适用于无需手动控制最小值的快速使用场景。
三、ConcentricRectangleShape（角分布规则）
ConcentricRectangleShape 用于描述 每个角是否统一控制，或分别控制。
该类型支持 7 种结构组合模式。
1. 全角统一模式（最常用）
1{
2 corners: EdgeCornerStyle
3 isUniform?: boolean
4}
参数说明：
| 参数 |
说明 |
corners |
应用于全部角的样式 |
isUniform |
是否强制完全一致，默认 false |
示例：
1<ConcentricRectangle
2 corners={{
3 style: "concentric",
4 minimum: 8
5 }}
6 fill="red"
7/>
2. 四个角完全独立定义
1{
2 topLeadingCorner?: EdgeCornerStyle
3 topTrailingCorner?: EdgeCornerStyle
4 bottomLeadingCorner?: EdgeCornerStyle
5 bottomTrailingCorner?: EdgeCornerStyle
6}
适用于：
3. 底部统一角
1{
2 uniformBottomCorners?: EdgeCornerStyle
3 topLeadingCorner?: EdgeCornerStyle
4 topTrailingCorner?: EdgeCornerStyle
5}
适用于：
4. 顶部统一角
1{
2 uniformTopCorners?: EdgeCornerStyle
3 bottomLeadingCorner?: EdgeCornerStyle
4 bottomTrailingCorner?: EdgeCornerStyle
5}
适用于：
5. 顶部与底部统一组合
1{
2 uniformTopCorners?: EdgeCornerStyle
3 uniformBottomCorners?: EdgeCornerStyle
4}
6. 左侧统一角
1{
2 uniformLeadingCorners?: EdgeCornerStyle
3 topTrailingCorner?: EdgeCornerStyle
4 bottomTrailingCorner?: EdgeCornerStyle
5}
7. 左右统一组合
1{
2 uniformLeadingCorners?: EdgeCornerStyle
3 uniformTrailingCorners?: EdgeCornerStyle
4}
四、通用 Shape 属性（ShapeProps）
1type ShapeProps = {
2 trim?: {
3 from: number
4 to: number
5 }
6
7 fill?: ShapeStyle | DynamicShapeStyle
8
9 stroke?: ShapeStyle | DynamicShapeStyle | {
10 shapeStyle: ShapeStyle | DynamicShapeStyle
11 strokeStyle: StrokeStyle
12 }
13}
1. trim（路径裁剪）
1trim={{
2 from: 0.0,
3 to: 0.5
4}}
用于路径绘制动画、环形裁剪、渐进描边等效果。
2. fill（填充）
1fill="red"
2fill="ultraThinMaterial"
支持：
3. stroke（描边）
1stroke="blue"
2
3stroke={{
4 shapeStyle: "blue",
5 strokeStyle: {
6 lineWidth: 2
7 }
8}}
五、ConcentricRectangle 在 View Modifiers 中的使用
1. 作为 clipShape 使用
1clipShape?: Shape | "concentricRect" | ({
2 type: "concentricRect"
3} & ConcentricRectangleShape)
示例：
1<VStack
2 clipShape={{
3 type: "concentricRect",
4 corners: {
5 style: "concentric",
6 minimum: 10
7 }
8 }}
9/>
用于：
2. 作为 background 使用
1background?: ShapeStyle | DynamicShapeStyle | {
2 style: ShapeStyle | DynamicShapeStyle
3 shape: Shape | "concentricRect" | ({
4 type: "concentricRect"
5 } & ConcentricRectangleShape)
6} | VirtualNode | {
7 content: VirtualNode
8 alignment: Alignment
9}
示例：
1<VStack
2 background={{
3 style: "ultraThinMaterial",
4 shape: {
5 type: "concentricRect",
6 corners: "concentric"
7 }
8 }}
9/>
3. 作为 contentShape 使用（命中测试区域）
1contentShape?: Shape | {
2 kind: ContentShapeKinds
3 shape: Shape | "concentricRect" | ({
4 type: "concentricRect"
5 } & ConcentricRectangleShape)
6}
用于控制点击、悬停、拖拽等交互命中区域。
六、完整示例解析
示例代码：
1<ZStack
2 frame={{
3 width: 300,
4 height: 200
5 }}
6 containerShape={{
7 type: "rect",
8 cornerRadius: 32
9 }}
10>
11 <ConcentricRectangle
12 corners={{
13 style: "concentric",
14 minimum: 8
15 }}
16 fill="red"
17 />
18</ZStack>
该示例实现了：
- 外部容器为固定圆角矩形
- 内部使用同心递进圆角矩形
- 内外形成层级差异与视觉纵深感
- 红色填充用于强调 ConcentricRectangle 的实际形态
七、设计与实现注意事项
-
minimum 不应超过实际高度或宽度的一半
-
同心圆角更适合与：
glassmaterialbluropacity
等视觉效果配合使用
-
作为 contentShape 使用时，仅影响点击区域，不影响视觉裁剪
-
作为 clipShape 使用时，会真实裁剪子视图渲染内容
